<template>
    <view class="mainPage">
        <cu-custom :isBack="true"></cu-custom>
        <view class="page flex flex-direction justify-center align-center">
            <view class="box padding radius-xl bg-white" v-if="info.id">
                <view class="text-center themeColor">
                    <text class="cuIcon-roundcheckfill h1"></text>
                    <view class="text-bold text-sm margin-top-sm">核验成功</view>
                    <view class="text-bold text-sm margin-top-sm">{{ info.verification_time }}</view>
                </view>
                <view class="padding margin-tb-lg">
                    <view class="flex justify-between margin-tb-sm">
                        <view class="text-grey">预约时间：</view>
                        <view class="text-bold">{{ info.start_time }}</view>
                    </view>
                    <view class="flex justify-between margin-tb-sm">
                        <view class="text-grey">服务时长：</view>
                        <view class="text-bold themeColor">{{ info.duration }}分钟</view>
                    </view>
                    <view class="flex justify-between margin-tb-sm">
                        <view class="text-grey">计划通勤时长：</view>
                        <view class="text-bold">{{ info.commuting_duration }}分钟</view>
                    </view>
                    <view class="flex justify-between margin-tb-sm">
                        <view class="text-grey">计划抵达时间：</view>
                        <view class="text-bold">{{ info.plan_arrival_time }}</view>
                    </view>
                    <view class="flex justify-between margin-tb-sm" v-if="info.commuting_time">
                        <view class="text-grey">实际通勤时长：</view>
                        <view class="text-bold" :class="{ 'text-red': info.timeout, 'themeColor': !info.timeout }">
                            {{ getTimeText(info.commuting_time) }}</view>
                    </view>
                    <view class="flex justify-between margin-tb-sm">
                        <view class="text-grey">实际抵达时间：</view>
                        <view class="text-bold">{{ info.arrival_time }}</view>
                    </view>
                </view>
                <view class="button text-center margin-top-lg">
                    <button class="cu-btn china-btn-bg round"
                        @click="$utils.$page.redirect('/technician/pages/index/index')">
                        <text class="padding-lr">技师中心</text>
                    </button>
                </view>
            </view>
            <view class="box" v-else-if="message">
                <view class="padding radius-xl bg-white text-center text-red">
                    <text class="cuIcon-roundclosefill h1"></text>
                    <view class="text-bold text-sm margin-top-sm">{{ message }}</view>
                </view>
                <view class="button text-center margin-top-lg">
                    <button class="cu-btn china-btn-bg round"
                        @click="$utils.$page.redirect('/technician/pages/index/index')">
                        <text class="padding-lr">技师中心</text>
                    </button>
                    <view class="padding-top-sm themeColor text-sm" @tap="$utils.$page.switch('/pages/index/index')">
                        <text>返回首页</text>
                        <text class="cuIcon-right"></text>
                    </view>
                </view>
            </view>
        </view>
        <loading v-if="pageLoading" />
        <x-login ref="xLoginRef" @success="verification" />
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            code: '',
            info: {},
            pageLoading: false,
            message: ''
        };
    },
    computed: {
        ...mapState({
            USERINFO: state => state.USER.USERINFO,
            WEBCONFIG: state => state.WEBCONFIG
        })
    },
    onLoad(options) {
        this.code = options.code;
        if (!this.$store.getters.hasLogin) {
            this.$nextTick(() => {
                this.login({
                    redirect: 'technician-verification',
                    action: this.code
                });
            })
        } else if (this.$utils.$auth.auth({ action: 'user', permission: 'technician' })) {
            this.verification();
        } else {
            this.$utils.$page.switch('/pages/index/index');
        }
    },
    methods: {
        verification() {
            this.pageLoading = true
            this.$utils.$api.AppointmentService.verification({
                code: this.code
            })
                .then(res => {
                    this.info = res.data
                    const arrival_time = new Date(data.arrival_time.replace(/-/g, '/'));
                    const plan_arrival_time = new Date(data.start_time.replace(/-/g, '/'));
                    plan_arrival_time.setMinutes(plan_arrival_time.getMinutes() + data.commuting_duration);
                    this.info.plan_arrival_time = `${this.getDayName(plan_arrival_time)} ${plan_arrival_time.getHours().toString().padStart(2, '0')}:${plan_arrival_time.getMinutes().toString().padStart(2, '0')}`;
                    this.info.timeout = false;
                    if (arrival_time > plan_arrival_time) {
                        this.info.timeout = true;
                    }
                }).catch(err => {
                    this.message = err.msg;
                }).finally(() => {
                    this.pageLoading = false
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    height: 90vh;
}

.box {
    width: 80vw;
    box-sizing: border-box;
}

.h1 {
    font-size: 72rpx;
}
</style>
